<template>
	<view>
		<my-search @myclick="setsearch"></my-search>
		<view class="scroll-view-container">
			<!-- 右边 -->
			<scroll-view  class="left-scroll-view" scroll-y :style="{height:wh+'px'}">
				<view :class="[{'actve':actve==index}]"  v-for="(item,index) in cateList" :key="index" @click="getdex(index)">{{item.cat_name}}</view>
			</scroll-view>
			<!-- 左边 -->
			<scroll-view  class="right-scroll-view" scroll-y :scroll-top="scrollTop" :style="{height:wh+'px'}" >
				<view class="cate-v2" v-for="(item,index) in leveList" :key="item.cat_id">
						<!--  标题  -->
						<view class="titel">/ {{item.cat_name}} /</view>
						<!-- 内容 -->
						<view class="Box-min">
								<view class="Box-min-item" v-for="(it,i) in item.children" :key="i" @click="setshopList(it)">
									<image style="width:100%" :src="it.cat_icon" mode="widthFix"></image>
									<text>{{it.cat_name}}</text>
								</view>
						</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import tabbar from'../../mixins/tabbar.js'
	export default {
		mixins:[tabbar],
		data() {
			return {
				actve:0,
				cateList:[],
				wh:0,
				leveList:[],//二级分类
				scrollTop:0,
			};
		},
		onLoad(){
			const sysInof=uni.getSystemInfoSync()
			this.wh=sysInof.windowHeight
			this.getCate()
		},
		methods:{
			setsearch(){
				uni.navigateTo({
					url:'../../subpkg/search/search'
				})
			},
			setshopList(item){
				uni.navigateTo({
					url:'../../subpkg/goods_list/goods_list?cid='+item.cat_id
				})
			},
			getCate(){
				uni.$http.get('/api/public/v1/categories').then(res=>{
					this.cateList=res.data.message;
					this.leveList=res.data.message[0].children;
				})
			},
			getdex(dex){
				this.actve=dex;
				this.leveList=this.cateList[dex].children;
				this.scrollTop=this.scrollTop===0?1:0;
			}
		},
	}
</script>

<style lang="scss">
.scroll-view-container{display: flex;justify-content: space-around;}
.left-scroll-view{
	box-sizing: border-box;
	width:240rpx;text-align:center;
	view{padding:20rpx 0;}
}
.actve{border-left:10rpx solid red;}
.titel{text-align: center;padding:14rpx 0;font-weight:600;}
.Box-min{display: flex;flex-wrap: wrap;}
.Box-min-item{
	width:33.33%;
	display: flex;
	font-size:8rpx;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding:10rpx;
	font-size:30rpx;
	}
</style>
